<template>
  <!--    我是首页-->
  <!--    <el-button type="primary" @click="gotolink">登录</el-button>-->
    <!--最顶部 导航条+巨幕+幻灯片-->
    <div class="row">
      <div class="col-md-12 column">
        <!-- 导航条 -->
        <nav class="topnav navbar navbar-expand-lg navbar-dark fixed-top" style="font-size: 20px;" :style="topNavBg">
          <div class="container-fluid">
            <span class="mr-3 iconbox iconsmall fill rounded-circle bg-white text-black shadow border-0"><i class="fa fa-book fa-lg" aria-hidden="true" id="fa-book"></i></span>
            <a class="navbar-brand ml-1" href="/" style="font-size: 25px;color:white;"><strong>嘉庚考研圈</strong></a>
            <!-- Toggler -->
            <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
            <!-- Collapse -->
            <div class="navbar-collapse collapse ml-3" id="navbarColor02">
              <ul class="navbar-nav mr-auto d-flex align-items-center" id="nav_contain">
                <!-- 有下拉菜单-->
                <li class="nav-item dropdown"  data-toggle="hover">
                  <a class="" href="javascript:void(0);"  role="button" @click="change_infor()" style="margin-right: -25px;text-decoration: none">
                    考研资讯 </a>
                  <a class="dropdown-toggle dropdown-toggle-split" role="button" id="navbarDropdown1" data-toggle="dropdown" aria-expanded="false">
                  </a>
                  <div class="dropdown-menu p-3" aria-labelledby="navbarDropdown1" style="font-size:15px;">
                    <a class="dropdown-item" href="javascript:void(0);" style="color: black" @click="change_KaoYan()">考研信息</a>
                    <a class="dropdown-item" href="javascript:void(0);" style="color: black" @click="change_ZhaoShen()">招生信息</a>
                    <a class="dropdown-item" href="javascript:void(0);" style="color: black" @click="change_Daily()">考研日报</a>
                    <a class="dropdown-item" href="javascript:void(0);" style="color: black" @click="change_Recommend()">特别推荐</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="javascript:void(0);" style="color: black" @click="change_Other()">其他</a>
                  </div>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="javascript:void(0);" @click="change_colle()">院校信息</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="javascript:void(0);" @click="change_res()">闲置转卖</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="javascript:void(0);" @click="change_soc()">积分中心</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="javascript:void(0);" @click="change_dis()">交流讨论社区 </a>
                </li>
<!--                <li class="nav-item">-->
<!--                  <a class="nav-link" href="javascript:void(0);" @click="">留言板</a>-->
<!--                </li>-->
              </ul>
              <!--                搜索框-->
              <form class="form-inline my-2 my-lg-0 mr-4">
                <input class="form-control mr-sm-2" type="search" placeholder="请输入内容" aria-label="Search">
                <button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
              </form>
              <!--                小图标-->
              <ul class="navbar-nav" id="navbar_ul">
                <li class="nav-item"><a class="nav-link" href="javascript:void(0);"><i class="fa fa-commenting" aria-hidden="true"></i></a></li>
                <li class="nav-item">
                  <a class="nav-link" href="javascript:void(0);" @click="change_deal">
                    <el-tooltip class="item" effect="dark" placement="bottom">
                      <i class="fa fa-cart-plus fa-lg" aria-hidden="true"></i>
                      <div slot="content" class="p-2">
                        查看我的交易
                      </div>
                    </el-tooltip>
                  </a>
                </li>



                <li class="nav-item dropdown"  data-toggle="hover">
                  <div>
                    <i class="personicon fa fa-user-circle fa-lg " aria-hidden="true" style="margin-top: 13px" @click="change_person_center"></i>
                    <a class="dropdown-toggle dropdown-toggle-split"
                       style="text-decoration: none;" id="navbarDropdown2" data-toggle="dropdown" aria-expanded="false">
                    </a>
                  </div>


                  <div class="dropdown-menu p-3" aria-labelledby="navbarDropdown2" style="font-size:15px;" >
                    <a class="dropdown-item" href="javascript:void(0);" style="color: black" @click="change_person_center">个人中心</a>
                    <a class="dropdown-item" href="javascript:void(0);" style="color: black" @click="change_basic">修改信息</a>
                    <div class="dropdown-divider"></div>
                    <div v-show="showButton">
                      <a class="dropdown-item" href="javascript:void(0);" style="color: black" @click="Register()" >登录</a>
                    </div>
                    <div  v-show="!showButton">
                      <a class="dropdown-item" href="javascript:void(0);" style="color: black" @click="quit">退出登录</a>
                    </div>
                  </div>
                </li>



              </ul>
            </div>
          </div>
        </nav>
        <header>
          <div class="jumbotron jumbotron-lg jumbotron-fluid position-relative">
            <!--                 style="line-height: 200px;-->
            <!--                  /*background-image: linear-gradient(to bottom, #5788d6, #4b9edb, #56b1db, #72c2d9, #94d1d8, #a3d7dd, #b2dee2, #c1e4e7, #c3e4ed, #c7e3f1, #cee2f5, #d5e1f6);*/-->
            <!--                  ;margin-left: -16px;margin-right: -15px">-->
            <div class="text-white">
              <div class="d-lg-flex align-items-center justify-content-between text-center pl-lg-5"  style="margin-top:150px;">
                <div class="col" >
                  <h1 class="title">迟到的梦想，&nbsp;现在补回来！</h1>

                  <div class="row pt-4" style="padding-left: 550px">
                    <div class="col-md-2" >
                      <select class="yearsfontclass form-control form-control-placeholder" v-model="year" @change="selectChange_year($event)">
                        <option value="2024" style="color: black;">2024</option>
                        <option value="2025" style="color: black;">2025</option>
                        <option value="2026" style="color: black;">2026</option>
                      </select>
                    </div>
                    <div class="col-md-4 pt-1" style="margin-left: -30px">
                      <h5 style="font-weight: bold;font-size: 27px">年考研倒计时 {{days}} 天</h5>
                    </div>
                  </div>

                  <div>

                    <div class="show_btn"  v-show="showButton">
                      <a class="btn btn-lg btn-outline-light btn-round mr-4"
                         style="width: 150px;font-weight:bold;" href="javascript:void(0);" @click="Register()">Login</a>
                      <a class="btn btn-lg btn-outline-light btn-round"
                         style="width: 150px;font-weight:bold;" href="javascript:void(0);" @click="Register()">Register</a>
                    </div>

                    <div class="" v-show="!showButton">
                      <a href="javascript:void(0);" class="btn btn-lg  btn-round"></a>
                    </div>

                  </div>
                </div>
              </div>
            </div>
          </div>
        </header>
      </div>
    </div>
</template>

<script>
import "@/assets/css/main.css"
import "@/assets/css/aos.css"
import websocket from "@/utils/websocket";

export default {
  name: "myheader",
  data() {
    return {
      showButton:false,
      activeIndex: '1',
      activeIndex2: '1',
      //设置导航栏变色
      topNavBg: {
        backgroundColor: ''
      },
    //  倒计时时间相关
      year:2024,
      days:0,


    };
  },
  mounted () {
    window.addEventListener('scroll', this.handleScroll) // 监听页面滚动
  },
  methods: {
    selectChange_year(event){
      this.year=event.target.value;
      this.getDays();
    },
    //计算倒计时天数  12月24考试
    getDays(){
      var startdate = new Date();  //开始日期，当前日期
      var year = this.year-1; // 选择的年
      var enddate=new Date(`${year}`+'-12-24');
      this.days=parseInt(Math.abs(enddate.getTime() - startdate.getTime()) / 1000 / 60 / 60 / 24);
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    gotolink(){
      //点击跳转至上次浏览页面
      // this.$router.go(-1)
      //指定跳转地址
      this.$router.replace('/Login')
    },
    // 滚动页面时触发导航变色
    handleScroll () {
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      // 设置背景颜色的透明度
      if (scrollTop) {
        this.topNavBg.backgroundColor = `rgba(183, 193, 172,
	        	${scrollTop / (scrollTop + 60)})` // scrollTop + 多少根据自己的需求设置
      } else if (scrollTop === 0) {
        this.topNavBg.backgroundColor = 'transparent' // 设置回到顶部时，背景颜色为透明
      }
    },
    // 滚动之前重置
    beforeDestroy () {
      window.removeEventListener('scroll', this.handleScroll)
    },
    change_dis(){
      if(this.$router.history.current.path !='/Discussion_Frame/Discussion_Main/All_Discussion'){
        this.$router.push({path:'/Discussion_Frame/Discussion_Main/All_Discussion'});
      }
    },
    change_res()
    {
      if(this.$router.history.current.path !='/Resale'){
        this.$router.push({path:'/Resale'});
      }
    },
    change_colle(){
      if(this.$router.history.current.path !='/Colleges'){
        this.$router.push({path:'/Colleges'});
      }
    },
    change_soc(){
      if(this.$router.history.current.path !='/Score'){
        this.$router.push({path:'/Score'});
      }
    },
    Register(){
      if(this.$router.history.current.path !='/Gegister'){
        this.$router.push({path:'/Gegister'});
      }
    },
    change_person_center(){
      if(this.$router.history.current.path !='/Personal/Person_Note'){
        this.$router.push({path:'/Personal/Person_Note'});
      }
    },
    change_basic(){
      if(this.$router.history.current.path !='/Personal_Info/Person_Basic'){
        this.$router.push({path:'/Personal_Info/Person_Basic'});
      }
    },
    change_infor()
    {
      if(this.$router.history.current.path !='/KaoYan_Frame/Information'){
        this.$router.push({path:'/KaoYan_Frame/Information'});
      }
    },
    change_KaoYan(){
      if(this.$router.history.current.path !='/KaoYan_Frame/KaoYan_Info'){
        this.$router.push({path:'/KaoYan_Frame/KaoYan_Info'});
      }
    },
    change_ZhaoShen(){
      if(this.$router.history.current.path !='/KaoYan_Frame/ZhaoShen_Info'){
        this.$router.push({path:'/KaoYan_Frame/ZhaoShen_Info'});
      }
    },
    change_Daily(){
      if(this.$router.history.current.path !='/KaoYan_Frame/Daily_Info'){
        this.$router.push({path:'/KaoYan_Frame/Daily_Info'});
      }
    },
    change_Recommend(){
      if(this.$router.history.current.path !='/KaoYan_Frame/Recommend_Info'){
        this.$router.push({path:'/KaoYan_Frame/Recommend_Info'});
      }
    },
    change_Other() {
      if (this.$router.history.current.path != '/KaoYan_Frame/Other_Info') {
        this.$router.push({path: '/KaoYan_Frame/Other_Info'});
      }
    },
    change_experience(){
      if (this.$router.history.current.path != '/Discussion_Frame/Discussion_Main/Experience_Discussion') {
        this.$router.push({path: '/Discussion_Frame/Discussion_Main/Experience_Discussion'});
      }
    },
    change_question(){
      if (this.$router.history.current.path != '/Discussion_Frame/Discussion_Main/Question_Discussion') {
        this.$router.push({path: '/Discussion_Frame/Discussion_Main/Question_Discussion'});
      }
    },
    // change_talks(){
    //   if (this.$router.history.current.path != '/Idle_Talks') {
    //     this.$router.push({path: '/Idle_Talks'});
    //   }
    // },
    change_deal(){
      if (this.$router.history.current.path != '/Deal_Main/My_Buy_Deals') {
        this.$router.push({path: '/Deal_Main/My_Buy_Deals'});
      }
    },
    //  退出登录
    quit(){

      sessionStorage.clear();
      websocket.onCloseWs();
      this.$message.success("退出登录成功！");
      this.$router.push({path:'/Gegister'});

    }




  },
  created() {
    //未登录 没有token
    if(!window.sessionStorage.getItem('token') || window.sessionStorage.getItem('token')==null || window.sessionStorage.getItem('token')===''|| window.sessionStorage.getItem('token')===undefined){

      this.showButton=true;  //显示登录注册的按钮

    }
    this.getDays();

  }


}
</script>

<style scoped>
.topnav
{
  /*z-index: 100;*/
  /*color: inherit;*/
  /*opacity: 0.9;*/
}
/*下拉菜单悬停*/
/*悬停显示*/
.navbar-nav .dropdown:hover>.dropdown-menu {
  display: block;
}
/*虚化菜单按钮  就是 让点击无效的意思*/
.navbar-nav .dropdown>.dropdown-toggle:active
{
  pointer-events: none;
}
/*导航栏样式设置*/
.navbar-nav>ul
{
  margin-left: 0px;
}
#nav_contain>li>a
{
  margin-left:20px;
  font-size: 16px;
  color: white;
}
#nav_contain>li>a:hover
{
  font-weight: bold;
}
/*小图标*/
#navbar_ul>li>a>i
{
  color: white;
}
#navbar_ul>li>a>i:hover
{
  color: #223F23;
}
#navbar_ul>li
{
  margin-left: 13px;
}
#navbar_ul
{
  margin-right: 100px;
}
/*大标题*/
.title
{
  margin-top: 40px;
  font-size: 57px;
  /*text-shadow: 3px 3px 0px #0e0b2b;*/
  /*font-weight: bold;*/
  color: ghostwhite;
  font-weight: 800;
}
.jumbotron
{
  background: url('~@/assets/back.jpg') no-repeat center;
  background-size:cover;
  line-height: 500px;
  margin-left: -15px;
  margin-right: -15px
}
/*走马灯img*/
/*.carousel{*/
/*  box-shadow: 10px 10px 5px #888888;*/
/*}*/
a,li,ul,h1,h2,h3,h4,h5{
  font-family: YouYuan;
  color: white;
}
/*选择年份输入框样式设置*/
.yearsfontclass{
  background-color: transparent;
  color: white;
  font-size: 22px;
  font-weight: bold;
}
/*.navbar-brand>strong:hover*/
/*{*/
/*  font-size: 26px;*/
/*}*/
.personicon:hover{
  color: #234b44;
}
</style>
